<template>
	<view class="container">
		<Header title="订单管理"></Header>
		<view class='my-order'>
			<view class='nav acea-row row-around'>
				<view class="item" :class="orderStatus == item.value ? 'on' : ''" @click="statusClick(item.value)" v-for="(item, index) in tabs" :key="index">
				  <view>{{ item.label }}</view>
				</view>
			</view>
			
			<view class='list'>
			    <view class='item' v-for="(item,index) in orderList" :key="index" @click="getDetail(item.orderNo)">
			      <view>
			        <view class='title acea-row row-between-wrapper'>
			          <view class="acea-row row-middle">
			            <view>{{item.createdAt}}</view>
			          </view>
			          <view class='font-color'>{{ item.orderStatusText }}</view>
			        </view>
			        <view class='item-info acea-row row-between row-top' v-for="(goods, i) in item.goods" :key='i'>
			          <view class='pictrue'>
			            <image :src="goods.thumb"></image>
			          </view>
			          <view class='text acea-row row-between'>
			            <view class='name line2'>{{goods.goodsName}}</view>
			            <view class='money'>
			              <view>积分：{{goods.credit}}</view>
			              <view>x {{goods.goodsNum}}</view>
			            </view>
			          </view>
			        </view>
			      </view>
					  <!-- -1 已撤销 0 待支付 1 已支付 2 已发货 3 已收货
			      <view class='bottom acea-row row-right row-middle'>
			        <view class='bnt cancelBnt' wx:if="{{item._status._type==0 || item._status._type == 9}}" data-index="{{index}}" data-order_id="{{item.order_id}}" bindtap='cancelOrder'>取消订单</view>
			        <view class='bnt bg-color' wx:if="{{item._status._type == 0}}" data-pay_price="{{item.pay_price}}" data-order_id="{{item.order_id}}" bindtap='goPay'>立即付款</view>
			        <view class='bnt bg-color' wx:elif="{{item._status._type == 1 || item._status._type == 9}}" data-order_id="{{item.order_id}}" bindtap='goOrderDetails'>查看详情</view>
			        <view class='bnt bg-color' wx:elif="{{item._status._type == 2 && item.delivery_type}}" data-order_id="{{item.order_id}}" bindtap='goOrderDetails'>查看详情</view>
			        <view class='bnt bg-color' wx:elif="{{item._status._type == 3}}" data-order_id="{{item.order_id}}" bindtap='goOrderDetails'>去评价</view>
			        <view class='bnt bg-color' wx:elif="{{item.seckill_id < 1 && item.bargain_id < 1 && item.combination_id < 1 && item._status._type == 4}}" data-order_id="{{item.order_id}}" bindtap='goOrderDetails'>再次购买</view>
			        <view class='bnt cancelBnt' wx:if='{{item._status._type == 4 }}' data-order_id="{{item.order_id}}" data-index="{{index}}" bindtap='delOrder'>删除订单</view>
			      </view> -->
			    </view>
				<view class="loadingicon acea-row row-center-wrapper" v-if="!loadend">
					<text class="loading iconfont icon-jiazai" :hidden="loading==false"></text>{{loadTitle}}
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '@/subpages/components/header.vue'
	import {
		getUserInfo
	} from '@/api/user.js'

	import {
		getOrderList
	} from '@/api/order.js'

	export default {
		components: {
			Header
		},
		data() {
			return {
				loading: false,				
				loadTitle:'加载更多',
				loadend: false, // 加载到底部
				page: 1, // 页数
				pagesize: 10, // 每页条数
				orderList: [],
				orderStatus: '',
				tabs: [
					{label: '全部', value: ''},
					{label: '已支付', value: 1},
					{label: '已发货', value: 2},
					{label: '已收货', value: 3},
					{label: '已取消', value: -1}
				]
			}
		},
		onLoad() {
			this.getUserInfo().then(() => {
				this.getList();
			});
		},
		onReady() {
			
		},
		methods: {
			/**获取用户信息*/
			async getUserInfo() {
				const {data} = await getUserInfo();
				this.userInfo = data
			},
			/**获取数据*/
			async getList(isPage) {
				if (isPage) {
					this.loadend = false
					this.page = 1
					this.orderList = []
				}
				if (this.loading) return
				if (this.loadend) return
				this.loading = true
				this.loadTitle = ''
				uni.showLoading({
					title: '数据加载中...',
					mask: true
				});
				const query = {
					page: this.page,
					pagesize: this.pagesize,
					orderStatus: this.orderStatus
				}
				getOrderList(query).then(res => {
					if (res.code == 200) {
						const list = res.data.lists
						this.loadend = list.length < this.pagesize
						this.orderList = [...this.orderList, ...list]
						this.loadTitle = this.loadend ? '我也是有底线的' : '加载更多'
						this.page++
					} else {
						uni.showToast({
							title: '获取数据失败！',
							duration: 1000,
							icon: 'none',
						});
					}
					this.loading = false
				});
				uni.hideLoading()
			},
			// 改变状态
			statusClick(status) {
				this.orderStatus = status
				this.getList(true)
			},
			// 跳转详情页
			getDetail(orderNo) {
				uni.navigateTo({
					url: './order-detail?id=' + orderNo
				})
			}
		},
		/**
		   * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function () {
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	@import './order.css';
</style>
